<template>
  <SectionInfo v-for="item in list" :key="item.value" :title="item.label">
    <template #header>
      <span>编辑</span>
    </template>
    <InfoGroup :col="item.col" v-if="item.children && item.children.length">
      <InfoItem v-for="child in item.children" :key="child.field" :label="child.label" :col="child.col">
        {{ child.format ? child.format({ value: detailed[child.field] }) : detailed[child.field] }}
      </InfoItem>
      <!-- <InfoItem label="门店地点">广东省深圳市南山区某某路100号</InfoItem>
      <InfoItem label="门店地点">广东省深圳市南山区某某路100号</InfoItem>
      <InfoItem label="门店地点">广东省深圳市南山区某某路100号</InfoItem>
      <InfoItem label="门店地点">广东省深圳市南山区某某路100号</InfoItem>
      <InfoItem label="门店地点">广东省深圳市南山区某某路100号</InfoItem>
      <InfoItem label="门店地点">广东省深圳市南山区某某路100号</InfoItem>
      <InfoItem label="门店地点">广东省深圳市南山区某某路100号</InfoItem> -->
    </InfoGroup>
    <!-- slot -->
    <slot v-if="item.slotName" :name="item.slotName" />
  </SectionInfo>
</template>

<script lang="ts">
  export default { name: 'infoComponent' }
</script>
<script lang="ts" setup>
  const props = defineProps({
    list: {
      type: Array,
      defalut: () => [],
    },
    detailed: {
      type: Object,
      defalut: () => ({}),
    },
  })

  // console.log(111, props.detailed)
</script>
